<template>
    <div>
        <div class="share-page">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/log' }">操作日志</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="monitoring-content">
            <div class="title">日志列表</div>
            <div class="tables">
                <div class="search">
                    <el-form :inline="true" :model="formInline" style="width: 100%">
                        <div class="search-item">
                            <el-form-item label="时间段">
                                <el-date-picker v-model="formInline.region" type="datetimerange" placeholder="请选择"
                                    style="width: 360px" :suffix-icon="CaretBottom" />
                            </el-form-item>
                            <el-form-item label="账号名称">
                                <el-input v-model="formInline.region" placeholder="请输入账号名称相关字眼" style="width: 200px">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="日志内容">
                                <el-input v-model="formInline.region" placeholder="请输入日志内容相关字眼" style="width: 200px">
                                </el-input>
                            </el-form-item>
                            <span class="btn">
                                <el-button round color="#0071bb" :icon="Search" style="margin-right:10px">搜索</el-button>
                                <span class="btn">
                                    <el-dropdown :hide-on-click="false">
                                        <span class="el-dropdown-link">
                                            <el-button round  :icon="HelpFilled">筛选</el-button>
                                        </span>
                                        <template #dropdown>
                                            <el-dropdown-menu style="max-height: 300px">
                                                <el-dropdown-item v-for="(item, index) in checkArr" :key="index"
                                                    @click.stop="filterTableData(item)">
                                                    <el-checkbox v-model="item.show" size="large" :label="item.label" />
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </span>
                            </span>
                        </div>
                    </el-form>
                </div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
                        v-for="(item, index) in headerArr" :key="index">
                    </el-table-column>
                </el-table>
            </div>
            <!-- 底部分页 -->
            <div class="page_number">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
                    :disabled="disabled" layout="prev, pager, next, jumper,total" :total="10"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import type { ComponentSize } from "element-plus";
import { useRouter } from "vue-router";
import {
    Refresh,
    Search,
    RefreshLeft,
    HelpFilled,
    Plus,
    CaretBottom,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const disabled = ref(false);
const tableData = [
    {
        id: "1",
        name: "13306236880",
        level: "INFO",
        content: "新增角色权限",
        time: "2024-05-31 15:20:22",
    },
    {
        id: "2",
        name: "13306236880",
        level: "INFO",
        content: "新增角色权限",
        time: "2024-05-31 15:20:22",
    },
    {
        id: "3",
        name: "13306236880",
        level: "INFO",
        content: "新增角色权限",
        time: "2024-05-31 15:20:22",
    },
];
const formInline = ref({
    region: "",
});
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
};
// 列表选中的属性
const checkArr = ref<any>([
    { label: "账号名称", prop: "name", show: true },
    { label: "日志等级", prop: "level", show: true },
    { label: "日志内容", prop: "content", show: true },
    { label: "发生时间", prop: "time", show: true },
]);
const headerArr = ref<any>([
    { label: "账号名称", prop: "name", show: true },
    { label: "日志等级", prop: "level", show: true },
    { label: "日志内容", prop: "content", show: true },
    { label: "发生时间", prop: "time", show: true },
]);
const filterTableData = (item: any) => {
    setTimeout(() => {
        headerArr.value = checkArr.value.filter((item: any) => item.show == true);
    }, 500);
};
const router = useRouter();
</script>
<style lang="scss" scoped>
.el-button--primary {
    background: rgb(0, 113, 187);
}

.el-button--warning {
    background: rgb(246, 146, 30);
}

.el-button--danger {
    background: rgb(255, 0, 0);
}

.title {
    color: #4d4d4d;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
}

.monitoring-content {
    background: #fff;
    padding: 10px 10px 0px 10px;
}

.search {
    display: flex;
    justify-content: space-between;
    // margin-bottom: 10px;
    padding: 0 10px;
}

.search-item {
    width: 100%;
    display: flex;

    .btn {
        align-self: right;
    }
}

.mx-10 {
    margin: 0px 10px;
}

.flex-s {
    display: flex;
    align-content: center;
    justify-content: start;
}

.page_number {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
}

.tables {
    margin-top: 10px;
}

.type2 {
    color: #71abd8;
}
</style>
  